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DYNAMIC USER INTERFACE 

FIELD OF THE INVENTION 

The present invention relates generally to computer software, and specifically 
to tools for generating graphic user interfaces. 

BACKGROUND OF THE INVENTION 

Graphic user interfaces (GUIs) have become the accepted means for 
interaction between computer programs and their users. A variety of tools are known 
in the art, such as Visual Basic and Visual C++ for use by computer application 
developers in designing a GUI. These tools provide standard building blocks, 
including controls, such as menu bars, push buttons, sliders, check boxes and knobs, as 
well as areas for text input. To create a GUI, the application developer selects the 
appropriate building blocks and arranges them on the screen. Each of the building 
blocks is used to invoke an appropriate function in the application program. 

A "skin" can be used to change the visual appearance of the GUI, without 
changing the underlying functionality. The skin is a graphic file that provides a visual 
cover for the elements of the GUI. For example, Stardock (www.stardock.com) 
offers a skin utility known as "WindowBlinds," which allows the user to change the 
style of title bars, buttons, toolbars and other elements of the Microsoft Windows 
GUI. Winamp (www.winamp.com) offers a computer media player with many 
different, interchangeable skins. Users can also create their own skins using a suitable 
graphics editor. Soft Shape (www.softshape.com) offer ActiveSkin, an ActiveX 
control that changes the visual appearance of forms and dialogs. In all cases, however, 
the skin is tied to a template and must line up geometrically with the underlying 
functional user interface elements. Consequently, the GUI designer has only limited 
flexibility in choosing the shapes, sizes and relative positions of the elements of the 
interface. 
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After the priority date of the present invention, the Quintessential CD "QCD 
2.0 Player" was released. This player has a GUI that allows users to replace its entire 
skin without regard to shape, size or position of the original user interface supplied 
with the player. Features of QCD 2.0 skins are described in a document entitled 
"Designing User Interfaces ('Skins') for the QCD 2.0 Player," available at 
www.quinnware.com, which is incorporated herein by reference. Among the features 
of the skin implementations described in this document is the use of color coding to 
define "maps" that describe the location and shape of smaller controls that are overlaid 
on top of larger controls. Predefined colors tell QCD 2.0 what the associated pixels 
are supposed to mean in terms of user interface functions. 
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SUMMARY OF THE INVENTION 

It is an object of some aspects of the present invention to provide improved 
tools and methods for use in creating a GUI. 

It is a further object of some aspects of the present invention to provide tools 
that allow a user with only minimal programming know-how to build a GUI. 

It is yet a further object of some aspects of the present invention to provide 
tools that afford enhanced flexibility in creating a GUI. 

It is still a further object of some aspects of the present invention to separate 
the GUI from underlying application programs using object-oriented methods. 

It is another object of some aspects of the present invention to enable the 
creation of GUIs that can be used in multiple, different applications. 

It is yet another object of some aspects of the present invention to enable the 
creation of GUIs that can be used in different operating systems, as well as over 
networks, such as the Internet. 

Preferred embodiments of the present invention provide a dynamic skin, which 
can be used by a designer of a GUI to lay out user interface elements on a computer 
screen freely, substantially without constraint as to their positions, shapes or sizes. 
The dynamic skin is based on a relation between predefined graphic elements and 
corresponding user interface functions of an application. The graphic elements and 
their relation to the corresponding user interface functions are specified by the GUI 
designer, typically in terms of the color or geometrical properties of the graphic 
elements. (These geometrical properties may also include providing graphic elements 
having the form of text characters.) The designer determines the positions, sizes and 
shapes of the elements of the GUI by means of the layout of the corresponding graphic 
elements on the screen. These elements are automatically mapped to the corresponding 
user interface functions. The mapping is maintained regardless of the operating system 
platform on which the application runs, and is unaffected by changes in the positions, 
sizes and shapes of the graphic elements. 
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The designer lays out the graphic elements on the screen, preferably using a 
standard "paint" program, without the need for any special editor or 
application-specific tools. Users can thus design and customize their user interface 
freely, while the functional mapping of the on-screen controls is maintained 
automatically. There is substantially no limit to the number of different graphic 
elements that can be used in this manner to invoke user interface functions. On the 
other hand, it is also possible to introduce graphic elements in the dynamic skin that 
invoke multiple functions, for example, by using an element that has a color 
corresponding to one function and a geometrical property corresponding to another. 
Furthermore, a given correspondence of graphic elements to user interface functions 
may be maintained across multiple applications having common user interface 
functions, without the need for software adapters or program changes. By the same 
token, consistency of appearance and functionality can be easily maintained in the GUI 
of a given application, regardless of whether the application runs on a local host or 
over a network, and even when the GUI is presented to the user through an Internet 
browser. There is generally no need for graphic-related development or adjustments in 
order to adapt the GUI for different client/server application configurations. 

In some preferred embodiments of the present invention, the dynamic skin is 
used to change aspects of the GUI easily, even during run-time of the underlying 
application. Such changes can be invoked by the user, or they can be triggered by 
application content. For example, in a media player application, the appearance of the 
GUI can change depending on the song or video clip that the application is playing. 
Similarly, run-time changes to the GUI can be used to provide multiple views of the 
application controls during run-time - for example, zoom-in and zoom-out views or 
multiple views associated with different audio/video channels (such that for each 
channel that the user selects, all or part of the view is changed). 
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There is therefore provided, in accordance with a preferred embodiment of the 
present invention, a method for creating a graphic user interface (GUI) for a computer 
application, including: 

defining a relation that associates certain graphic elements with corresponding 
user interface elements that are linked to functions of the application; 

providing an image that includes one or more of the graphic elements at 
respective locations in the image; and 

generating a user interface screen responsive to the image, such that the user 
interface elements are mapped to positions on the screen determined by the respective 
locations of the corresponding graphic elements in the image. 

Preferably, defining the relation includes associating graphic elements of a 
given color with a corresponding one of the user interface elements, wherein 
associating the graphic elements of the given color includes identifying a certain color 
with a background region of the user interface screen, and wherein generating the user 
interface screen includes displaying the background region as a transparent region. 

Alternatively or additionally, defining the relation includes associating graphic 
elements of a given shape with a corresponding one of the user interface elements. 

Preferably, providing the image includes changing a graphic quality of one of 
the graphic elements in the image, and generating the user interface screen includes 
changing the corresponding user interface element on the screen responsive to 
changing the graphic quality, substantially without effect on the function to which the 
element is linked. Most preferably, changing the graphic quality includes changing the 
location of the one of the graphic elements, and changing the corresponding user 
interface element includes changing the position of the user interface element. 
Alternatively or additionally, changing the graphic quality includes changing a size 
characteristic of the one of the graphic elements, and changing the corresponding user 
interface element includes changing a corresponding size characteristic of the user 
interface element on the screen. 
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Preferably, generating the user interface screen includes mapping the elements 
in a manner that is substantially independent of an operating platform on which the 
application runs. In a preferred embodiment, generating the user interface screen 
includes generating a browser screen on a computer accessing the application remotely 
via a network. Most preferably, generating the user interface screen includes 
generating substantially the same user interface on the browser and on a local client of 
the application. Further preferably, defining the relation includes defining a relation 
that is preserved across multiple, different applications. 

Preferably, providing the image includes providing a bitmap image, such that 
the user interface elements are mapped responsive to the bitmap. Further preferably, 
generating the user interface screen includes building the screen based on the graphic 
elements, substantially without resort to a textual description of the user interface 
elements. Most preferably, generating the user interface screen includes building the 
screen based on the graphic elements, substantially without affecting the functions of 
the application. In a preferred embodiment, defining the relation includes associating 
the graphic elements with respective, predefined user interface objects and altering one 
of the predefined objects by inheritance thereof. 

Preferably, generating the user interface screen includes providing a skin 
including graphic representations of the user interface elements at the approximate 
positions to which the graphic elements are mapped. 

In a preferred embodiment, defining the relation includes identifying at least 
one of the graphic elements with a user interface push button. 

In another preferred embodiment, defining the relation includes identifying at 
least one of the graphic elements with an area for display of text or graphics associated 
with the application. 

In still another preferred embodiment, defining the relation includes identifying 
at least one of the graphic elements with a user control for selecting a value of a 
parameter from a range of values. Preferably, providing the image includes providing 
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an input image in which the at least one of the graphic elements includes a range of 
colors corresponding to the range of values of the parameter. Alternatively or 
additionally, providing the image includes providing an input image in which the at 
least one of the graphic elements defines a range of positions of a slider corresponding 
to the range of values of the parameter. Preferably, the at least one of the graphic 
elements includes an elongate element that deviates substantially from a straight, linear 
shape. 

In yet another preferred embodiment, generating the user interface screen 
includes altering an appearance of one or more of the user interface elements while the 
application is running. Preferably, altering the appearance includes providing multiple 
different views of the user interface screen, most preferably including zoom-in and 
zoom-out views. In an alternative embodiment in which the application is a 
multimedia player application having multiple channels, providing the multiple different 
views includes associating the different views with different channels of the multimedia 
player. Alternatively or additionally, the application presents content to the user, and 
altering the appearance includes altering the appearance of the one or more user 
interface elements responsive to a characteristic of the content. 

There is also provided, in accordance with a preferred embodiment of the 
present invention, a computer software product for creating a graphic user interface 
(GUI) for a computer application, the product including a computer-readable medium 
in which program instructions are stored, which instructions, when read by a 
computer, cause the computer to receive a defined relation that associates certain 
graphic elements with corresponding user interface elements that are linked to 
functions of the application and to receive an image that includes one or more of the 
graphic elements at respective locations in the image, and to generate, responsive to 
the image, a user interface screen in which the user interface elements are mapped to 
positions on the screen determined by the respective locations of the corresponding 
graphic elements in the image. 
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There is additionally provided, in accordance with a preferred embodiment of 
the present invention, apparatus for creating a graphic user interface (GUI) for a 
computer application, including: 

a GUI processor, which is adapted to receive a definition of a relation that 
associates certain graphic elements with corresponding user interface elements that are 
linked to functions of the application, and to receive an image that includes one or 
more of the graphic elements at respective locations in the image, and to generate a 
user interface screen responsive to the image, such that the user interface elements are 
mapped to positions on the screen determined by the respective locations of the 
corresponding graphic elements in the image; and 

a display, which is driven by the processor to display the user interface screen. 

Preferably, the apparatus includes a pointing device, which is operable by a 
user of the apparatus to change a graphic quality of one of the graphic elements in the 
image, and the processor is adapted to change the corresponding user interface 
element on the screen responsive to changing the graphic quality, substantially without 
effect on the function to which the element is linked. 

The present invention will be more fully understood from the following 
detailed description of the preferred embodiments thereof, taken together with the 
drawings in which: 
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BRIEF DESCRIPTION OF THE DRAWINGS 

Fig. 1 is a schematic, pictorial illustration of a system for design of a GUI. in 
accordance with a preferred embodiment of the present invention; 

Fig. 2 is a flow chart that schematically illustrates a method for designing a 
GUI, in accordance with a preferred embodiment of the present invention; 

Fig. 3 is a schematic image of a computer screen illustrating a design for a 
GUI, in accordance with a preferred embodiment of the present invention; 

Fig. 4 is a schematic image of a computer screen illustrating a dynamic skin 
associated with the GUI of Fig. 3, in accordance with a preferred embodiment of the 
present invention; 

Fig. 5A is a schematic illustration of a detail of a graphic element used in the 
dynamic skin of Fig. 4, in accordance with a preferred embodiment of the present 
invention; 

Fig. 5B is a schematic graphic image showing multiple states of an on-screen 
control used in the GUI of Fig. 3, in accordance with a preferred embodiment of the 
present invention; and 

Fig. 6 is a schematic image of a computer screen illustrating the GUI of Fig. 3 
in operation, in accordance with a preferred embodiment of the present invention. 
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DETAILED DESCRIPTION OF PREFERRED EMBODIMENTS 

Fig. 1 is a schematic, pictorial illustration of a system 20 for use in designing a 
flexible GUI, in accordance with a preferred embodiment of the present invention. 
System 20 comprises a processor 22, typically an industry-standard personal 
computer, with peripheral devices including a display 24, a pointing device 28, a 
keyboard 30 and disk memory 32. Optionally, system 20 also includes an imaging 
device 26, such as a scanner. Processor 22 preferably runs a standard operating 
system, such as one of the Microsoft Windows operating systems, UNIX, or 
substantially any other operating system known in the art that supports graphic 
windows. Software for use in designing and running the flexible GUI, as described in 
detail hereinbelow, may be supplied to processor 22 over a network or on tangible 
media, such as CD-ROM. 

Fig. 2 is a flow chart that schematically illustrates a method for designing a 
flexible GUI, in accordance with a preferred embodiment of the present invention. At 
a correspondence definition step 40, a correspondence is defined between specified 
user interface functions and graphic elements. The user interface functions preferably 
comprise methods, which are most preferably defined by a programmer of the 
application by inheritance from a dynamic skin class. Each graphic element comprises 
a set of points, or pixels, in a graphic image having certain predefined properties. The 
set typically comprises a large collection of pixels covering a region of the computer 
screen, but it may alternatively comprise any number of pixels or even only a single 
pixel. 

For example, a graphic element may be defined as comprising all of the pixels 
on the screen of a given color or range of colors. On the other hand, a graphic 
element may also be defined as a group of pixels that form a particular shape, such as a 
star or octagon, or as a group of pixels having both a particular shape and a particular 
color. The defined shape of the graphic element may also comprise letters or a word, 
such as "PLAY," which is recognized by processor 22 using methods of image 
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recognition known in the art. The graphic element may further be defined in terms of 
an area of a given color surrounding certain letters or a word. 

The result of step 40 is a correspondence function relating user-defined graphic 
elements to the specified user interface functions of an application. The function 
preferably has the form of an initialization file, external to the application, which can 
be changed by the user without affecting the methods of the user interface. Such a 
correspondence function, appropriate for a media player application, for example, is 
illustrated in Table I below: 



TABLE I 



Graphic element 


Application function 


Yellow octagon 


Play 


Red area 


Stop 


Pentagram 


Forward 


Triangle 


Back 



More complex shapes may also be used, such as particular images that are 
recognizable by the computer. Furthermore, although the elements described above 
and appearing in the table are all two-dimensional, three-dimensional shapes may also 
be used as graphic elements, so long as they are defined in a manner that enables the 
computer to recognize them. 

At a medium input step 42, one or more graphic media are input to processor 
22. One of these media is to serve as a dynamic skin for the GUI of the application, as 
described in detail hereinbelow. Additional media may be input to serve as an overlay 
skin for the GUI, which users of the application will see on screen. The graphic media 
may be scanned using imaging device 26 or they may be input to the processor as a 
file. Alternatively, the graphic media may be created by the GUI designer using any 
suitable paint or imaging program known in the art. If a graphic medium is not already 



11 



36116US 



in bitmap form, it is converted to a bitmap, preferably a 24-bit RGB bitmap, at a 
bitmap generation step 44. The bitmap of the dynamic skin is then used by the 
computer to create a graphic map, at a map creation step 46. The graphic elements, 
such as those defined in Table I above, and the relations between them are identified in 
the map at an identification step 48. They are used to position and initialize the 
corresponding dynamic user interface elements, based on the defined correspondence 
function, at an initialization step 50. The GUI is then available for user interaction 
when the application is run, at a run step 52. Details of these steps will now be 
described with reference to a number of specific examples. 

Fig. 3 is a schematic image of computer display 24, showing the design of an 
application window 60, which serves as a GUI skin for an exemplary media player 
application, in accordance with a preferred embodiment of the present invention. The 
window comprises a rectangular area in which an image of a user interface device 62 
appears against a background 64. Device 62 includes controls such as push-buttons 
64 and 68, a multi-position knob 66, a text area 70 and a graphic area 72. Each of 
these controls is tied to the functions of the media player by a dynamic skin, as 
described hereinbelow. 

Device 62, with its controls, is preferably defined as that part of window 60 
that does not belong to background 64 and does not belong to any other graphic 
element that may be associated with the application. Background 64 is preferably all 
of one color, represented in the figure by hatching. The selected background color is 
preferably specified at step 40. Device 62 can then be defined as the part of window 
60 that is not of that color. Background 64 is itself defined as corresponding to a 
background element of the GUI. It is associated in the application user interface with 
a background object, responsible for drawing the background of the window in which 
the application is running. Preferably, when the application window is open, the 
background is transparent. 
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Fig. 4 is a schematic representation of a dynamic skin image 80, created by a 
user to control the media player of Fig. 3, in accordance with a preferred embodiment 
of the present invention. Preferably, image 80 is created on processor 22 using a 
standard "paint" program, as is known in the art. Alternatively, the image may be 
scanned into system 20, for example, using image capture device 26. Thus, it is even 
possible for the user to create image 80 by coloring by hand on paper. Image 80 
contains a device region 82, corresponding to device 62, and has areas 84, 86, 88, 90, 
92 of different colors, which correspond to the user controls and text and graphic 
areas of device 62. These different colors are represented in the figure by different 
styles of hatching. Preferably, in generating the graphic map of image 80 at step 46, 
pixels of the same color, belonging to each of the different areas, are tied together by a 
graph, in which each of the pixels in the area points to a subsequent one, so that the 
area is fully defined. 

As defined at step 40, each of the colors of the different areas corresponds to a 
particular user interface element. Thus, areas 84 and 88 correspond to the different 
functions of push buttons 64 and 68, respectively. Area 86 corresponds to 
multi-position knob 66. Areas 90 and 92 correspond to text and graphic areas 70 and 
72, respectively. In addition, a linear area 94 is used to define a slider in the GUI of 
the media player. Some of these elements are described in greater detail hereinbelow. 
Preferably, the correspondence function between the graphic elements and user 
interface functions also specifies a hierarchy, so that when two or more user controls 
overlap, they are "stacked" in the proper order in the GUI that appears on the 
computer display. 

With respect to pushbuttons 64 and 68, the graphic media that are input to 
processor 22 at step 42 preferably comprise two different skin images for each button: 
one showing the button in its rest position (unpressed), and another in its depressed 
position. The depressed image typically shows the button as though it has been 
pressed down into device 62. Optionally, the color of the button also changes, 



13 



36116US 



typically to a brighter color, as though the button is lit up. The user interface function 
associated with each of areas 84 and 88 in the dynamic skin map is such that when a 
user of the application clicks on any of the areas with pointing device 28, the 
depressed image of the corresponding push button is substituted for its rest image. At 
the same time, the appropriate application function, such as "play" or "stop," is 
invoked. As shown in Figs. 3 and 4, it is not necessary that the controls in the skin 
image and the corresponding areas of the dynamic skin be of exactly the same size and 
shape. 

As noted above, areas 90 and 92 in Fig. 4 define corresponding text and 
graphic areas in the GUI. In a similar manner, a freehand painting region (not shown 
in the figures) may be defined. For this purpose, the graphic media that are input at 
step 42 preferably also include files defining the foreground and background colors to 
be used for freehand drawing. Text fonts are preferably defined for these areas by a 
programmer of the GUI, either in bitmap form or by specifying appropriate system 
fonts to use. When the application is running, at step 52, and the user manipulates the 
cursor in the corresponding painting region, the cursor movements will be recorded in 
a bitmap record of the region and will appear as areas of foreground or background 
color in the region. Preferably, user controls are provided enabling the user to select 
foreground or background color and to vary parameters such as color intensity, brush 
width, etc., as is known in the art. 

Figs. 5A and 5B schematically illustrate the graphic media used in creating and 
operating multi-position knob 66, in accordance with a preferred embodiment of the 
present invention. Fig. 5A shows a detail of area 86 in the dynamic skin medium of 
Fig. 4, while Fig. 5B shows a strip 115 containing images 120, 122, 124, 128, 130 
of knob 68 in different positions. Area 86 is divided into sectors 100, 102, 104, 
108, 110 of different colors (represented by the different hatching styles). Each of 
these sectors corresponds to one of the images in strip 115. As will be apparent by 
comparison of Figs. 3 and 4, area 86 does not exactly correspond in size to knob 66, 



14 



36116US 



and the user or designer of the GUI preferably designates a position within area 86 in 
which the appropriate one of images 120, 122, 124, 128, 130 is to be positioned. 
Most preferably, the position of the image is roughly centered in area 86. 

When the application is running, there is an application object associated with 
area 86 that interprets user mouse clicks within sectors 100, 102, 104, 108, 110 
according to the color of the respective sector. Preferably, the colors of the sectors 
have a common hue, and vary in intensity and/or saturation from a minimum (dark 
color) in sector 100 to a maximum in sector 110. The color gradations correspond to 
levels of a variable parameter in the application, such as the volume of sound played by 
the media player. The limits of the parameter and the granularity of its variation are 
controlled by a programmer of the application, typically by inheriting the appropriate 
application object with whatever modifications are necessary. The application object 
associated with area 86 responds to each mouse click in one of the sectors by calling 
for the corresponding image from strip 1 15 to be displayed in the GUI and by passing 
the corresponding value of the variable parameter to the application. 

Fig. 6 is a schematic representation of a computer screen 140 showing the GUI 
of the media player application described above, in accordance with a preferred 
embodiment of the present invention. Device 62 appears in the foreground of the 
screen, while a background region 144 of the media player window is transparent. 
The application has entered a text message 146 in text area 70 and displays a graphic 
logo 148 in graphic area 72. A slider element 142 has also been added to the device. 
By clicking on element 142 and dragging it along the length of device 62, the user is 
able to adjust a variable parameter of the application that is associated with the slider. 

The slider is defined by linear area 94 in dynamic skin image 80, together with 
an image of the graphic element (in this case a butterfly) used as the slider element. 
Although area 94 could be drawn as a straight line, like sliders known in the art, in the 
present embodiment it is drawn as a curve with an angled portion midway along its 
length. The use of the dynamic skin allows the path of the slider to have substantially 
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any reasonable shape, and allows substantially any graphic to be used as the slider 
element. To operate the slider, processor 22 preferably maps a two-dimensional graph 
of area 94 onto a virtual straight line. Most preferably, a "shortest path" algorithm, as 
is known in graph theory, is used to locate the points on the graph, and ray tracing is 
used to find the optimal mapping for each point. The linear distance traversed by 
element 142 to reach any point along area 94 is thus translated into a single coordinate 
value that indicates the proportional position of the point between the ends of the 
graph. Alternatively, other methods may be used for mapping the slider element to the 
corresponding values of the parameter. 

The dynamic skin can also be used to define a two-dimensional "super slider" 
(not shown in the figures). In this case, a slider area is defined by means of a 
corresponding two-dimensional area of the dynamic skin image. Each position in this 
area has an X,Y value relative to an origin fixed in the area. The two-dimensional 
slider value is determined by the relative X and Y coordinates of the cursor position in 
the super slider area. 

Although a certain type of GUI has been chosen to be shown in the figures, 
with certain types of user interface elements selected for description hereinabove, it 
will be understood that the principles of the present invention may likewise be applied 
to the design of user interfaces for substantially any type of software application or 
other program. The GUI will generally be portable to substantially any operating 
environment, and can also work as a platform-independent GUI, run by a Java Virtual 
Machine, for example. User interface elements of other types, which may be defined 
and actuated using dynamic skin, will be apparent to those skilled in the art. 

Furthermore, GUIs based on the present invention may also be used in 
client/server and network browsing environments. In such network environments, a 
Java applet or browser plug-in preferably reads the graphic elements on the screen of 
the client computer and conveys them to the server on which the application is 
running. Because of the portability of the GUI, it can be used substantially without 
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change both in the browser and in other (non-Internet) client/server environments. The 
consistency of appearance and functionality of the GUI is thus maintained regardless 
of whether the application runs on a local host or through an Internet browser or other 
network interface, without the need for graphic-related development or adjustments. 

In the preferred embodiments described above, the appearance of the GUI 
shown on screen 140 is determined before the underlying application (the media 
player) begins to run. In other preferred embodiments of the present invention, 
however, the dynamic skin is used to change aspects of the GUI during run-time of the 
underlying application. This feature is made possible in these preferred embodiments 
by the fact that in the object-oriented approach of the present invention, all of the 
graphical elements are dynamic software objects, i.e., they are methods in a class. 
Therefore, these objects can reload new dynamic skin bitmaps and thus can change 
their behavior and appearance during run-time. Such changes can be invoked by the 
user, or they can be triggered by application content. For example, the appearance of 
the GUI can change depending on the song or video clip that the media player is 
playing. Similarly, run-time changes to the GUI can be used to provide multiple views 
of the application controls during run-time - for example, zoom-in and zoom-out 
views, or multiple views associated with different audio/video channels of a 
multimedia player application (such that for each channel that the user selects, all or 
part of the view is changed). 

It will thus be appreciated that the preferred embodiments described above are 
cited by way of example, and that the present invention is not limited to what has been 
particularly shown and described hereinabove. Rather, the scope of the present 
invention includes both combinations and subcombinations of the various features 
described hereinabove, as well as variations and modifications thereof which would 
occur to persons skilled in the art upon reading the foregoing description and which 
are not disclosed in the prior art. 
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CLAIMS 

1. A method for creating a graphic user interface (GUI) for a computer 
application, comprising: 

defining a relation that associates certain graphic elements with corresponding 
user interface elements that are linked to functions of the application; 

providing an image that includes one or more of the graphic elements at 
respective locations in the image; and 

generating a user interface screen responsive to the image, such that the user 
interface elements are mapped to positions on the screen determined by the respective 
locations of the corresponding graphic elements in the image. 

2. A method according to claim 1, wherein defining the relation comprises 
associating graphic elements of a given color with a corresponding one of the user 
interface elements. 

3. A method according to claim 2, wherein associating the graphic elements of 
the given color comprises identifying a certain color with a background region of the 
user interface screen, and wherein generating the user interface screen comprises 
displaying the background region as a transparent region. 

4. A method according to claim 1, wherein defining the relation comprises 
associating graphic elements of a given shape with a corresponding one of the user 
interface elements. 

5. A method according to claim 1, wherein providing the image comprises 
changing a graphic quality of one of the graphic elements in the image, and wherein 
generating the user interface screen comprises changing the corresponding user 
interface element on the screen responsive to changing the graphic quality, 
substantially without effect on the function to which the element is linked. 

6. A method according to claim 5, wherein changing the graphic quality 
comprises changing the location of the one of the graphic elements, and wherein 
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changing the corresponding user interface element comprises changing the position of 
the user interface element. 

7. A method according to claim 5, wherein changing the graphic quality 
comprises changing a size characteristic of the one of the graphic elements, and 
wherein changing the corresponding user interface element comprises changing a 
corresponding size characteristic of the user interface element on the screen. 

8. A method according to claim 1, wherein generating the user interface screen 
comprises mapping the elements in a manner that is substantially independent of an 
operating platform on which the application runs. 

9. A method according to claim 1, wherein generating the user interface screen 
comprises generating a browser screen on a computer accessing the application 
remotely via a network. 

10. A method according to claim 9, wherein generating the user interface screen 
comprises generating substantially the same user interface on the browser and on a 
local client of the application. 

11. A method according to claim 1, wherein defining the relation comprises 
defining a relation that is preserved across multiple, different applications. 

12. A method according to claim 1, wherein providing the image comprises 
providing a bitmap image, such that the user interface elements are mapped responsive 
to the bitmap. 

13. A method according to claim 1, wherein generating the user interface screen 
comprises building the screen based on the graphic elements, substantially without 
resort to a textual description of the user interface elements. 

14. A method according to claim 1, wherein generating the user interface screen 
comprises building the screen based on the graphic elements, substantially without 
affecting the functions of the application. 
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15. A method according to claim 1, wherein defining the relation comprises 
associating the graphic elements with respective, predefined user interface objects and 
altering one of the predefined objects by inheritance thereof. 

16. A method according to claim 1, wherein generating the user interface screen 
comprises providing a skin including graphic representations of the user interface 
elements at the approximate positions to which the graphic elements are mapped. 

17. A method according to claim 1, wherein defining the relation comprises 
identifying at least one of the graphic elements with a user interface push button. 

18. A method according to claim 1, wherein defining the relation comprises 
identifying at least one of the graphic elements with an area for display of text or 
graphics associated with the application. 

19. A method according to claim 1, wherein defining the relation comprises 
identifying at least one of the graphic elements with a user control for selecting a value 
of a parameter from a range of values. 

20. A method according to claim 19, wherein providing the image comprises 
providing an input image in which the at least one of the graphic elements includes a 
range of colors corresponding to the range of values of the parameter. 

21. A method according to claim 19, wherein providing the image comprises 
providing an input image in which the at least one of the graphic elements defines a 
range of positions of a slider corresponding to the range of values of the parameter. 

22. A method according to claim 21, wherein the at least one of the graphic 
elements comprises an elongate element that deviates substantially from a straight, 
linear shape. 

23. A method according to claim 1, wherein generating the user interface screen 
comprises altering an appearance of one or more of the user interface elements while 
the application is running. 
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24. A method according to claim 23, wherein altering the appearance comprises 
providing multiple different views of the user interface screen. 

25. A method according to claim 24, wherein providing the multiple different 
views comprises providing zoom-in and zoom-out views. 

26. A method according to claim 24, wherein the application comprises a 
multimedia player application having multiple channels, and wherein providing the 
multiple different views comprises associating the different views with different 
channels of the multimedia player. 

27 A method according to claim 23, wherein the application presents content to 
the user, and wherein altering the appearance comprises altering the appearance of the 
one or more user interface elements responsive to a characteristic of the content. 

28. A computer software product for creating a graphic user interface (GUI) for a 
computer application, the product comprising a computer-readable medium in which 
program instructions are stored, which instructions, when read by a computer, cause 
the computer to receive a defined relation that associates certain graphic elements with 
corresponding user interface elements that are linked to functions of the application 
and to receive an image that includes one or more of the graphic elements at respective 
locations in the image, and to generate, responsive to the image, a user interface 
screen in which the user interface elements are mapped to positions on the screen 
determined by the respective locations of the corresponding graphic elements in the 
image. 

29. A product according to claim 28, wherein the instructions cause the computer 
to associate graphic elements of a given color with a corresponding one of the user 
interface elements. 

30. A product according to claim 28, wherein the instructions cause the computer 
to associate graphic elements of a given shape with a corresponding one of the user 
interface elements. 
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31. A product according to claim 28, wherein responsive to a change made by a 
user in a graphic quality of one of the graphic elements in the image, the instructions 
cause the computer to change the corresponding user interface element on the screen 
responsive to changing the graphic quality, substantially without effect on the function 
to which the element is linked. 

32. A product according to claim 28, wherein the instructions cause the computer 
to generate the user interface screen substantially without dependence on an operating 
platform on which the application runs. 

33. A product according to claim 28, wherein the relation that associates the 
graphic elements with the corresponding user interface elements is preserved across 
multiple, different applications. 

34. A product according to claim 28, wherein the instructions enable the computer 
to alter an appearance of one or more of the user interface elements while the 
application is running. 

35. Apparatus for creating a graphic user interface (GUI) for a computer 
application, comprising: 

a GUI processor, which is adapted to receive a definition of a relation that 
associates certain graphic elements with corresponding user interface elements that are 
linked to functions of the application, and to receive an image that includes one or 
more of the graphic elements at respective locations in the image, and to generate a 
user interface screen responsive to the image, such that the user interface elements are 
mapped to positions on the screen determined by the respective locations of the 
corresponding graphic elements in the image; and 

a display, which is driven by the processor to display the user interface screen. 

36. Apparatus according to claim 35, wherein the processor is adapted to associate 
graphic elements of a given color with a corresponding one of the user interface 
elements. 
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37. Apparatus according to claim 35, wherein the processor is adapted to associate 
graphic elements of a given shape with a corresponding one of the user interface 
elements. 

38. Apparatus according to claim 35, and comprising a pointing device, which is 
operable by a user of the apparatus to change a graphic quality of one of the graphic 
elements in the image, and wherein the processor is adapted to change the 
corresponding user interface element on the screen responsive to changing the graphic 
quality, substantially without effect on the function to which the element is linked. 

39. Apparatus according to claim 35, wherein the relation that associates the 
graphic elements with the corresponding user interface elements is preserved across 
multiple, different applications, substantially without dependence on an operating 
system run by the processor. 

40. A product according to claim 35, wherein the processor is adapted to alter an 
appearance of one or more of the user interface elements while the application is 
running. 
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ABSTRACT 

A method for creating a graphic user interface (GUI) for a computer 
application includes defining a relation that associates certain graphic elements (84, 86, 
88, 90, 92) with corresponding user interface elements (64, 66, 68, 70, 72) that are 
linked to functions of the application. An image (80) is provided that includes one or 
more of the graphic elements at respective locations in the image. A user interface 
screen (140) is generated responsive to the image, such that the user interface 
elements are mapped to positions on the screen determined by the respective locations 
of the corresponding graphic elements in the image. 
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